<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue-2.5.7.js"></script>
</head>
<body>
<div id="vue-app-one">
    <h2>{{title}}</h2>
    <p>{{greet}}</p>
    <greeting></greeting>
</div>
<div id="vue-app-two">
    <h2>{{title}}</h2>
    <p>{{greet}}</p>
    <button v-on:click="changeTitle()">改名字</button>
    <greeting></greeting>
</div>

<script>
    Vue.component("greeting", {
        template: `<p>{{name}}:大家好，给大家介绍
            <button v-on:click="changeName">改名</button></p>`,
        data: function () {
            return {
                name: "mjduan"
            }
        },
        methods: {
            changeName: function () {
                this.name = "Henry";
            }
        }
    });
    const one = new Vue({
        el: "#vue-app-one",
        data: {
            title: "Title one"
        },
        methods: {},
        computed: {
            greet: function () {
                return "Hello App One";
            }
        }
    });
    const two = new Vue({
        el: "#vue-app-two",
        data: {
            title: "Title two"
        },
        methods: {
            changeTitle: function () {
                one.title = "被Two改名了"
            }
        },
        computed: {
            greet: function () {
                return "Hello App Two";
            }
        }
    })
</script>
</body>
</html>